<template>
  <div>
    <!-- <van-nav-bar title="新建地址" left-arrow @click-left="$router.back()" /> -->
    <h2>
      <span class="s1" @click="goBack()"> <van-icon name="arrow-left" /> </span
      >新建地址
    </h2>
    <van-cell-group>
      <van-field
        v-model="name"
        label="收件人"
        required
        clearable
        placeholder="请输入收件人姓名"
      />
      <van-field
        v-model="tel"
        label="手机号码"
        required
        type="tel"
        clearable
        :error-message="telError"
        @blur="validateTel"
        placeholder="请输入收件人手机号"
      />
      <van-cell
        title="收货地址"
        required
        is-link
        @click="showAddressPicker = true"
        :value="chosenAddress"
      ></van-cell>

      <van-field v-model="label" label="标签" required clearable>
        <template #label>
          <span>标签</span>
          <span
            :class="['family-label', { selected: label === '家庭' }]"
            @click="selectLabel('家庭')"
            >家庭</span
          >
          <span
            :class="['company-label', { selected: label === '公司' }]"
            @click="selectLabel('公司')"
            >公司</span
          >
          <div></div>
        </template>
      </van-field>

      <template>
        <div class="container">
          <span class="s11">设为默认地址</span>
          <van-switch v-model="isDefault" active-color="#1989fa" />
        </div>
      </template>
    </van-cell-group>

    <van-popup
      v-model="showAddressPicker"
      position="bottom"
      style="height: 80%"
    >
      <van-field
        v-model="province"
        label="省份"
        required
        placeholder="请输入省份"
      />
      <van-field
        v-model="city"
        label="城市"
        required
        placeholder="请输入城市"
      />
      <van-field
        v-model="county"
        label="区域"
        required
        placeholder="请输入区域"
      />
      <van-field
        v-model="address"
        label="详细地址"
        required
        placeholder="请输入详细地址"
      />
      <van-button @click="saveAddressPicker" type="primary" class="b1"
        >保存</van-button
      >
    </van-popup>

    <!-- <van-button type="primary" @click="saveAddress" class="save-button">保存</van-button> -->
    <div class="fixed-bottom">
      <van-button @click="saveAddress" type="primary" class="xin"
        >保存</van-button
      >
    </div>
  </div>
</template>


<script>
import Address from "@/api/address";

export default {
  data() {
    return {
      name: "",
      tel: "",
      chosenAddress: "",
      label: "",
      isDefault: false,
      telError: "",
      showAddressPicker: false,
      province: "",
      city: "",
      county: "",
      address: "",
    };
  },
  methods: {
    saveAddress() {
      const addressData = {
        userid: "123",
        name: this.name,
        tel: this.tel,
        province: this.province,
        city: this.city,
        county: this.county,
        addressdetail: this.address,
        isdefault: this.isDefault ? 1 : 0,
        label: !this.label ? undefined : this.label == "公司" ? 1 : 0,
      };
      console.log(addressData, "data");
      Address.setAddress({ ...addressData }).then((res) => {
        // alert("地址保存成功！");
        // console.log(res, "res");
        this.$router.push("/AddressPage");
      });
      // 将地址信息转换为字符串，并保存到浏览器的本地存储中
      // localStorage.setItem("addressData", JSON.stringify(addressData));

      // 保存成功后的提示或跳转逻辑
    },
    goBack() {
      this.$router.back(-1);
    },
    validateTel() {
      const reg = /^[\d]{11}$/;
      if (!reg.test(this.tel)) {
        this.telError = "手机号码不正确,请输入11位数字";
      } else {
        this.telError = "";
      }
    },
    openAddressPicker() {
      this.showAddressPicker = true;
    },
    saveAddressPicker() {
      this.chosenAddress =
        this.province + this.city + this.county + this.address;
      this.showAddressPicker = false;
    },
    selectLabel(selectedLabel) {
      this.label = selectedLabel;
    },
    goToChooseAddress() {
      this.$router.push("/choose");
    },
    selectLabel(selectedLabel) {
      this.label = selectedLabel;
    },
  },
};
</script>

<style scoped>
.b1 {
  width: 100%;
  margin-top: 444px;
  border-radius: 400px;
  text-align: center;
  /* height: 100px; */
}
h2 {
  text-align: center;
}

.family-label,
.company-label {
  margin-left: 5px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #f2f2f2;
  border-radius: 4px;
  color: #999;
  cursor: pointer;
}

.company-label {
  color: #666;
}

.van-switch__node {
  display: flex;
  align-items: center;
}

.s11 {
  font-size: 14px;
  color: #666;
  margin-left: 15px;
  order: -1;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s1 {
  position: absolute;
  left: 10px;
}
h2 {
  text-align: center;
  padding: 20px;
  position: relative;
  background: #fff;
}
/* .save-button {
  width: 300px;
 margin-top: 100px;

} */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
  text-align: center;
}

.xin {
  border-radius: 20px;
  width: 100%;
}
.selected {
  color: #fff;
  background-color: red;
}
</style>